<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="text-editor" v-cloak>
        <el-tabs>
            <el-tab-pane label="基础">
                <font-editor :module="module"></font-editor>
                <el-form-item label="字号">
                    <el-select v-model="module.data.fontSize" placeholder="请选择">
                        <el-option v-for="(fs, i) in fontSizeItems" :label="fs.label" :value="fs.value" :key="i"></el-option>
                    </el-select>
                </el-form-item>

                <font-editor v-model="module"></font-editor>

                <el-form-item label="文本内容">
                    <el-input :autosize="{ minRows: 5, maxRows: 10 }" show-world-limit type="textarea" :maxlength="1000"
                        v-model="module.data.text" placeholder="请输入文本内容"></el-input>
                </el-form-item>

                <el-form-item label="行间距">
                    <el-input-number :min="100" :max="200" postfix="%" v-model="module.data.lineHeight"></el-input-number>
                </el-form-item>


                <el-form-item label="字间距">
                    <el-input-number :min="0" :max="10" postfix="px" v-model="module.data.letterSpacing"></el-input-number>
                </el-form-item>

                <el-form-item label="点击跳转">
                    <link-editor v-model="module.data.link"></link-editor>
                </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="标题">
                <header-editor v-if="module.header" :module="module.header"></header-editor>
            </el-tab-pane>
            <el-tab-pane label="样式" name="style">
                <module-style-editor :module="module" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import LinkEditor from "@/components/LinkEditor";
import FontEditor from "./base/FontEditor";
import HeaderEditor from "./base/HeaderEditor";
import ModuleStyleEditor from "./ModuleStyleEditor/Index";
import SliderInput from "@/components/SliderInput";
export default {
    components: {
        LinkEditor,
        FontEditor,
        HeaderEditor,
        ModuleStyleEditor,
        SliderInput,
        FontEditor,
    },

    data () {
        return {
            loading: false,
            fontSizeItems: [
                //{ label: "10px", value: 10 },
                //{ label: "11px", value: 10 },
                { label: "最小", value: 24 },
                { label: "小", value: 26 },
                { label: "常规", value: 28 },
                { label: "大", value: 30 },
                { label: "超大", value: 32 },
                //{ label: "17px", value: 17 },
                //{ label: "18px", value: 18 },
            ],
        };
    },
    props: {
        module: { type: Object },
    },

    mounted: function () { },

    computed: {},

    methods: {},
};
</script>

<style scoped></style>